<template>
    <NuxtLayout name="crawler">
        <section class="report-wrapper">
            <div class="pcenter">
                <section class="f-b f-a-c f-j-sb">
                    <h1 class="ptitle"
                        title="小红书运营">小红书运营</h1>

                    <ReportSortItems v-model="dm.order_by"
                        @change="changeSort" />
                </section>

                <section class="pcontent">
                    <ReportFilterCondition :model-value="dm.tag_id"
                        :options="tagList"
                        @change="onChangeTag" />

                    <ReportFilterCondition class="date-filter"
                        :model-value="dm.date"
                        :options="dateList"
                        @change="onChangeDate" />
                </section>

                <section class="pcontent">
                    <ReportList v-if="tb.list?.length"
                        :items="tb.list" />
                </section>

                <section class="pcontent">
                    <ClientOnly>
                        <el-pagination v-model:current-page="tb.page"
                            :page-size="tb.limit"
                            :background="true"
                            layout="total, prev, pager, next"
                            :total="tb.total"
                            class="f-j-c"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </ClientOnly>
                </section>

            </div>
        </section>

    </NuxtLayout>
</template>

<script setup lang="ts">
import {
    queryRecordList,
    querySearchTags,
    querySelectOption
} from "~/api/report"
import { valueToObject } from "~/utils"
import { tLoading } from "~/utils/dialog"
import { dealFormData } from "~/utils/form"
const dm = reactive({
    order_by: 'publish_date',
    tag_id: -1,
    date: -1,
})
const tb = reactive({
    loading: false,
    isReset: false,
    page: 1,
    limit: 10,
    total: 0,
    list: [],
})
const getQueryParams = () => {
    const rc = {
        order_by: dm.order_by,
        tag_id: '',
        date_start: '',
        date_end: '',
        start: (tb.page - 1) * tb.limit,
        limit: tb.limit
    }
    if (dm.tag_id !== -1) {
        rc.tag_id = dm.tag_id
    }
    if (dm.date !== -1) {
        const { date_start, date_end } = dateList.value.find(item => item.id === dm.date)
        rc.date_start = date_start
        rc.date_end = date_end
    }
    return dealFormData(rc)
}
const [
    recordRC,
    tagsRC,
    selectOptionRC,
] = await Promise.all([
    useSSRFetch(queryRecordList(getQueryParams())),
    useSSRFetch(querySearchTags()),
    useSSRFetch(querySelectOption()),
])

const { data, error } = recordRC
const meta = computed(() => valueToObject(data.value?.meta))
useHead({
    title: meta.value.title,
    meta: [{
        name: 'keywords',
        content: meta.value.keywords
    }, {
        name: 'description',
        content: meta.value.description
    }],
})

watchPostEffect(() => {
    try {
        const { list, total } = data.value
        if (list) {
            tb.list = list
            tb.total = total
        }
    } catch (error) {
        // console.log('error', error)
    }
})

const tagList = computed(() => valueToArray(tagsRC.data?.value?.list))
const dateList = computed(() => {
    const rc = valueToArray(selectOptionRC.data?.value?.date_list).map((item, id) => {
        return {
            ...item,
            id,
        }
    })
    return [
        { name: '不限', id: -1 },
        ...rc,
    ]
})

const changeSort = () => {
    actionQuery()
}
const onChangeTag = (value) => {
    dm.tag_id = value
    actionQuery()
}
const onChangeDate = (value) => {
    dm.date = value
    actionQuery()
}

const handleSizeChange = (val: number) => {
    tb.limit = val
    actionReset()
}
const handleCurrentChange = (val: number) => {
    tb.page = val
    actionQuery()
}

const load = async () => {
    if (tb.loading) return
    tb.loading = true
    const tl = tLoading('加载数据中...')
    try {
        const { data } = await useGain(queryRecordList(getQueryParams()))
        console.log('data', data)
        const { total, list } = data
        tb.list = list
        tb.total = total
    } catch (error) {
        console.log(error)
    } finally {
        tb.loading = false
        setTimeout(() => tl.close(), 300);
    }
}

const actionQuery = () => {
    load()
}
const actionReset = () => {
    load()
}
const actionRefresh = () => {
    load()
}

const { initData } = useInitiate()
onMounted(async () => {
    showLoading()
    await initData()
    hideLoading()
    console.log('data', data?.value)
    console.log('tagsRC', tagsRC.data?.value)
    console.log('selectOptionRC', selectOptionRC?.data?.value?.date_list)
})
</script>

<style lang="scss">
.report-wrapper {
    // --right-width: 360px;
    --gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: var(--gap) auto;
    display: flex;
    align-items: flex-start;
    gap: var(--gap);

    .pcenter {
        flex-shrink: 0;
        width: 100%;

        .ptitle {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
        }

        .pcontent {
            margin-block-start: 10px;
            padding: 20px;
            background-color: #fff;
            border-radius: 6px;

            .date-filter {
                padding-block-start: 10px;
                margin-block-start: 10px;
                border-top: 1px solid var(--el-border-color);
            }
        }
    }

    // .pright {
    //     flex-shrink: 0;
    //     width: var(--right-width);
    // }
}
</style>